<template>
  <el-dialog
    top="30px"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
    title="追偿详情"
  >
    <table class="table table-bordered table-vertical-middle text-center" v-loading="loading">
      <colgroup>
        <col width="13%" />
        <col width="18%" />
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="23%" />
      </colgroup>
      <tbody>
        <tr>
          <td>追偿日期</td>
          <td>{{ $utils.dateFormat(recovery.recovery_date, 'yyyy年MM月dd日') }}</td>
          <td>登记人</td>
          <td>{{ recovery.submit_person_name }}</td>
          <td>登记时间</td>
          <td>{{ recovery.create_time }}</td>
        </tr>
        <tr>
          <td>追偿本金</td>
          <td>{{ recovery.amount || '-' }} 元</td>
          <td>追偿利息</td>
          <td>{{ recovery.interest || '-' }} 元</td>
          <td>其他费用</td>
          <td>{{ recovery.recovery_fee || '-' }} 元</td>
        </tr>
        <tr>
          <td>资金占用年利率</td>
          <td>{{ recovery.funds_use_rate || '-' }} %</td>
          <td>资金占用费</td>
          <td>{{ recovery.funds_use_fee || '-' }} 元</td>
          <td>追偿合计</td>
          <td>{{ recovery.recovery_amount || '-' }} 元</td>
        </tr>
        <tr>
          <td>追偿说明</td>
          <td colspan="5" class="text-left p-3">{{ recovery.des }}</td>
        </tr>
        <tr>
          <td>追偿附件</td>
          <td colspan="5" class="text-left p-3">
            <div v-for="file in areadyFiles" :key="file.url">
              <attach-item :attach-data="file"></attach-item>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </el-dialog>
</template>

<script>
import AttachItem from '@/bank/components/attach/Item'
import { attachAdapter } from '@/bank/components/attach/index'
import { arrayFromString } from '@vimi/utils-tool'
export default {
  components: {
    AttachItem,
  },
  props: {
    visible: Boolean,
    recoveryId: String,
  },
  data() {
    return {
      recovery: {},
      areadyFiles: [],
      loading: false,
      tableName: 'comps_recovery',
    }
  },
  computed: {},
  watch: {
    recoveryId: {
      handler: function () {
        this.getData(this.recoveryId)
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData(id) {
      this.recovery = {}
      this.areadyFiles = []
      if (!id) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'id.eq': id })
        .then(res => {
          this.recovery = res?.data?.[0] ?? {}
          this.areadyFiles = arrayFromString(this.recovery.attachment).reduce((prev, curr) => {
            prev.push(
              attachAdapter({
                attachment: curr,
              })
            )
            return prev
          }, [])
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
